<template>
  <!-- 整体 -->
  <div class="categoryContainer">
    <!-- 头部 -->
    <div class="categoryHeader">
      <!-- 头部搜索栏 -->
      <van-search
        class="search"
        input-align="center"
        placeholder="搜索商品,共115504款好物"
      />
    </div>
    <!-- 主要内容 -->
    <div class="contentContainer" v-bind="global">
      <!-- 左边菜单 -->
      <div class="leftContainer">
        <van-sidebar v-model="activeKey" class="leftScroll">
          <van-sidebar-item
            v-for="(item, index) in categoryL1List"
            :key="index"
            class="scrollItem"
            :title="item.name"
            @click.native="toitem(item.id)"
          />
        </van-sidebar>
      </div>
      <!-- 右边展示区 -->
      <div class="rightContainer">
        <!-- 右边展示区外边框 -->
        <div class="rightContainerall">
          <!-- 右边展示区内边框 -->
          <div class="rightContainerTop">
            <!-- 右边展示区上半部分图片 -->
            <div class="topImage">
              <van-image :src="currentCategory.bannerUrl" class="topImage1" />
            </div>
          </div>
          <!-- 右边展示区下半部分列表外边框 -->
          <!-- v-for="(contentItem,index) in cateObj.subCateList" :key="index" -->
          <div
            class="containerList"
            v-for="item in categoryGroupList"
            :key="item.id"
          >
            <!-- 商品简介 {{contentItem.name}}-->
            <div class="hd">{{ item.name }}</div>
            <!-- 商品简介展示区外边框 -->
            <ul class="list">
              <!-- 商品展示区每一个内边框 -->
              <li
                class="containerListItem"
                v-for="list in item.categoryList"
                :key="list.id"
              >
                <!-- 每一个商品展示 -->
                <div
                  class="containerImgWrapper"
                  @click="toList(list.id, list.name)"
                >
                  <!-- :src="contentItem.wapBannerUrl"  -->
                  <van-image :src="list.wapBannerUrl" />
                </div>
                <!-- 每一个商品大致简介 -->
                <div class="name">{{ list.name }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCategoryDatas, reqListInfo } from "@/api";
export default {
  name: "categorys",
  data() {
    return {
      activeKey: 0,
      //分类信息数据
      global: [],
      navId: "",
      categoryL1List: [], //左侧列表信息
      categoryGroupList: [], //右侧信息
      currentCategory: {}, //大图信息
    };
  },
  mounted() {
    this.getCategoryDatas();
  },
  methods: {
    async getCategoryDatas() {
      //第一步用第一个接口发起请求获取数据,不需要写参数
      //- ‘为你推荐’和分类列表的数据：https://m.you.163.com/item/cateList.json?__timestamp=1630131286110&categoryId=
      try {
        const result = await reqListInfo();
        this.categoryL1List = result.data.categoryL1List;
      } catch (error) {
        console.log(error);
      }
    },
    async toitem(id) {
      //第二步，通过第一步获取的数据，从中找到id数据，并将其传递过来
      try {
        //将获取到的id，运用到第二个接口中，发起请求获取数据
        //https://m.you.163.com/item/cateList.json?timestamp=1630131455012&categoryId=1005000,将这里修改为
        //`https://m.you.163.com/item/cateList.json?timestamp=1630131455012&categoryId=${categoryId}`
        const result = await reqCategoryDatas(id);
        //将大图的信息存储给currentcategory
        this.currentCategory = result.data.currentCategory;
        //将商品分类的信息存储给categoryGroupList
        this.categoryGroupList = result.data.categoryGroupList;
      } catch (error) {
        console.log(error);
      }
    },

    toList(id, title) {
      this.$router.push({
        path: "/categoryslist",
        query: {
          name: "categoryslist",
          title,
          id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.categoryHeader {
  height: 44px;
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 10px;
  position: fixed;
  left: 0;
  top: 0;
}
.contentContainer {
  display: flex;
  box-sizing: border-box;
  .leftContainer {
    height: 100%;
    position: fixed;
    left: 0;
    top: 50px;
    .leftScroll {
      width: 80px;
      height: 100%;
      border-right: 1px solid #d9d9d9;
      .scrollItem {
        height: 5px;
      }
    }
  }
  .rightContainer {
    position: absolute;
    top: 50px;
    left: 80px;
    padding: 15px;
    width: 100%;
    overflow: hidden;
    .rightContainerall {
      margin-top: 10px;
      height: 90%;
      .rightContainerTop {
        width: 100%;
        height: 82px;
        display: table;
        margin-bottom: 0.32rem;
        background: #eee no-repeat 50%;
        background-size: cover;
        border-radius: 4px;
        .topImage1 {
          width: 100%;
          height: 100px;
        }
      }
      .containerList {
        .hd {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          text-align: left;
          font-size: 16px;
          font-weight: 700;
          color: #333;
          border-bottom: 1px solid #d9d9d9;
          padding-bottom: 8px;
          margin-bottom: 15px;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          // align-content: space-around;
          .containerListItem {
            // margin-right: px;
            width: 33%;
            margin-bottom: 20px;
          }
        }
        .containerImgWrapper {
          width: 80px;
          // height: 72px;
        }
        .name {
          width: 61px;
          height: 30px;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
